import { useRouter } from 'next/navigation';

import Button, { ButtonVariant } from '@/components/button/Button';

const EmptyPlaylistContent = ({
  title,
  primaryButton,
  secondaryButton,
}: {
  title: string;
  primaryButton: {
    text: string;
    route: string;
  };
  secondaryButton: {
    text: string;
    route: string;
  };
}) => {
  const router = useRouter();
  return (
    <div className='mt-4 flex flex-col gap-2 text-center text-foreground-primary'>
      <div className='py-4'>{title}</div>
      <div className='flex flex-row justify-center gap-2'>
        <Button
          variant={ButtonVariant.Primary}
          onClick={() => router.push(primaryButton.route)}
        >
          {primaryButton.text}
        </Button>
        <Button
          variant={ButtonVariant.Secondary}
          onClick={() => router.push(secondaryButton.route)}
        >
          {secondaryButton.text}
        </Button>
      </div>
    </div>
  );
};

const NotOwnedEmptyPlaylistContent = ({
  userHandle,
  userDisplayName,
}: {
  userHandle: string;
  userDisplayName: string;
}) => {
  return (
    <EmptyPlaylistContent
      title='This playlist has no songs'
      primaryButton={{
        text: 'Go to Home',
        route: `/`,
      }}
      secondaryButton={{
        text: `View ${userDisplayName}`,
        route: `/@${userHandle}`,
      }}
    />
  );
};

const OwnedEmptyPlaylistContent = () => {
  return (
    <EmptyPlaylistContent
      title='Start your playlist by creating a song or adding an existing song from your Library'
      primaryButton={{
        text: 'Create Song',
        route: `/create`,
      }}
      secondaryButton={{
        text: 'Go to Library',
        route: `/me`,
      }}
    />
  );
};

const EmptyPlaylist = ({
  isOwned,
  userHandle,
  userDisplayName,
}: {
  isOwned: boolean;
  userHandle: string;
  userDisplayName: string;
}) => {
  return isOwned ? (
    <OwnedEmptyPlaylistContent />
  ) : (
    <NotOwnedEmptyPlaylistContent
      userHandle={userHandle}
      userDisplayName={userDisplayName}
    />
  );
};

export default EmptyPlaylist;